<template>
  <view>
    <view class="goods-list" v-if="!show">
      <block v-for="goods in goodsList" :key="goods.goods_id">
        <my-goods-item :goods="goods" @on-click="goToGoodsDetail(goods.goods_id)"></my-goods-item>
      </block>
    </view>
    <view class="empty" v-else>暂无商品列表数据</view>
  </view>
</template>

<script>
import { getGoodsListApi } from '../../api/good.js';
export default {
  data() {
    return {
      // 请求参数
      queryParams: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 8
      },
      // 商品列表数据
      goodsList: [],
      // 总记录数
      total: 0,
      // 节流阀
      loading: true,
      // 是否显示没有商品
      show: false
    };
  },
  onLoad(options) {
    if (options.query) {
      this.queryParams.query = options.query;
    }
    if (options.cid) {
      this.queryParams.cid = options.cid;
    }
    // 发起第一次请求
    this.getGoodsList();
  },
  // 触底的事件
  onReachBottom() {
    if (this.queryParams.pagenum * this.queryParams.pagesize >= this.total) {
      uni.$showMsg('数据加载完毕');
      return;
    }
    // 页码+1
    this.queryParams.pagenum++;
    // 再次发起请求
    this.getGoodsList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    // 1. 重置关键数据
    this.queryParams.pagenum = 1;
    this.total = 0;
    this.goodsList = [];
    this.loading = true;
    this.getGoodsList(() => {
      // 手动关闭加载中的效果
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    // 获取商品列表数据
    async getGoodsList(cb) {
      // 判断阀门是否开启
      if (this.loading) {
        // 请求数据前先关闭阀门
        this.loading = false;
        const res = await getGoodsListApi(this.queryParams);
        // 合并数据
        this.goodsList = [...this.goodsList, ...res.goods];
        if (this.goodsList.length) {
          // 代表有数据，就不要显示空的盒子
          this.show = false;
          this.total = res.total;
          // 完成请求后打开阀门
          this.loading = true;
          // 回调
          cb && cb();
        } else {
          // 代表无数据
          this.show = true;
        }
      }
    },
    // 点击商品去往商品详情页面
    goToGoodsDetail(goods_id) {
      uni.navigateTo({
        url: `/subpkg/goods_detail/goods_detail?goods_id=${goods_id}`
      });
    }
  }
};
</script>

<style lang="scss">
.goods-list {
}
.empty {
  width: 400rpx;
  height: 400rpx;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
